<template>
  <div class="login-container">
    <div
      id="gradeEightChart"
      :style="{ width: '95%', height: '400px' }"
    />
  </div>
</template>

<script>
// import echarts from "echarts";
// import * as echarts from 'echarts';
import { getPhoneNumReport } from '@/api/echarts'
export default {
  name: 'LoginIndex',
  components: {},
  props: {},
  data() {
    return {
      dataX: [],
      dataY: []
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getPhoneNumReport()
  },
  mounted() {
    // this.drawLine();
    setTimeout(() => {
      this.drawLine()
    }, 200)
  },
  methods: {
    getPhoneNumReport() {
      const aa = []
      const bb = []
      getPhoneNumReport().then((res) => {
        console.log(res.data.data)
        for (let i = 0; i < res.data.data.length; i++) {
          aa.push(res.data.data[i].name)
          bb.push(res.data.data[i].value)
        }
        this.dataX = aa
        this.dataY = bb
        this.drawLine()
      })
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      const gradeEightChart = this.$echarts.init(
        document.getElementById('gradeEightChart')
      )
      // 绘制图表
      gradeEightChart.setOption({
        title: {
          text: '各时间段通话数量统计'
        },
        tooltip: {
          trigger: 'axis',
          formatter: '{a} <br/>{b} : {c}(条)',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          // data: ['']
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: this.dataX
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '                  通话数量：条'
          }
        ],
        color: ['#FFC851'],
        series: [
          {
            name: '通话数量',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.dataY
          }
        ]
      })
    }
  }
}
</script>

<style scoped lang="scss"></style>
